<!--
 * @Description: 进度条组件
 * @Author: your name
 * @Date: 2019-09-26 18:01:32
 * @LastEditTime : 2019-12-18 14:32:42
 * @LastEditors  : Please set LastEditors
 -->
<template>
<div class="progress" :style="{background:progressbcg}">
    <div class="bar" :style="{width:width,background:barbcg}"></div>
</div>
</template>
<script>
export default {
    props:{
        progress:{
            type:[String,Number],
            default:'0.00',
        },
        progressbcg:{
            type:String,
            default:'#041725',
        },
        barbcg:{
            type:String,
            default:'#F1AD3E',
        },
    },
    computed:{
        width(){
            return Number(this.progress)+"%";
        },
    }
}
</script>
<style lang="less" scoped>
.progress{
    width:100%;
    height:8px;
    border-radius: 4px;
    position: relative;
    display:flex;
    align-items: center;
    .bar{
        height:8px;
        border-radius: 4px;
        position: relative;
    }
    
}
</style>